<template>
  <ul :class="[$style.container]">
    <li v-for="item in actions" :key="item.name" :class="[$style.item]" @click="otherLogin(item.name)">
      <i :class="[$style.icon]"><svg-icon :icon="item.icon"></svg-icon></i>
      <span :class="[$style.text]">{{item.label}}</span>
    </li>
  </ul>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'

@Component
export default class ActionList extends Vue {
  @Inject() otherLogin!: (type: string) => void

  actions = [
    { name: 'wecom', label: '企业微信', icon: 'wecom' },
    { name: 'ding_talk', label: '钉钉', icon: 'dingding' },
    { name: 'third', label: '第三方登录', icon: 'third' }
  ]
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.item {
  display: flex;
  align-items: center;

  &:hover {
    cursor: pointer;
    opacity: .9;
  }
}

.icon {
  font-size: 20px;
}

.text {
  margin-left: 8px;
  font-size: 12px;
  color: $text-secondary-color;
}
</style>
